.page_factory {
    height  : 100%;
    overflow: auto;
    display : flex;

    >.nav {
        border-right   : 1px solid #e6e6e6;
        height         : 100%;
        padding        : 10px;
        max-width          : 250px;
        flex: 1;
        display        : flex;
        justify-content: space-between;
        flex-wrap      : wrap;
        user-select    : none;
        align-content  : flex-start;

        >div {
            position     : relative;
            width        : 70px;
            height       : 70px;
            margin-bottom: 10px;
            border       : 1px solid #d9d9d9;

            &::after {
                content : '';
                position: absolute;
                width   : 100%;
                height  : 100%;
                top     : 0;
                left    : 0;
                visiable: hidden;
            }

            >img {
                width     : 28px;
                margin    : auto;
                display   : block;
                margin-top: 10px;
            }

            >.name {
                font-size  : 12px;
                text-align : center;
                padding-top: 6px;
                color      : #818181;
            }
        }
    }

    >.content {
        flex            : 1;
        background-color: #f1f1f1;
        padding         : 15px;
        display         : flex;
        justify-content : center;
        position  : relative;

        >.ifrome_html {
            width     : 375px;
            overflow  : auto;
            background: #fff;
            position  : relative;

            .cue_light {
                position: absolute;
                transition: all 0.1s;
            }
        }
        >.mask{
            position: absolute;
            width: 375px;
            top: 15px;
            bottom: 15px;
            z-index: 99999;
        }
    }

    >.navr{
        // width: 240px;
        flex: 1;
        position: relative;
        padding: 0 15px;
        max-width: 325px;
        min-width: 307px;
        >.bt{
            display: flex;
            // width: 210px;
            position: absolute;
            bottom: 15px;
            left: 15px;
            right: 15px;
            >button{ 
                flex: 1;
            }
        }
    }
    .lineleft,.lineright{
        position: fixed;
        width: 1px;
        background: #ff7b7b;
        z-index: 99;
    }
    .linetop,.linebottom{
        position: fixed;
        height: 1px;
        background: #ff7b7b;
        z-index: 99;
    }
    .css_cnt{
        >textarea{
            display: block;
            width: 100%;
            height: 300px;
        }
    }
    .json-editor {
        margin-left: 0;
        padding: 0;
        padding-top: 20px;
    }
    .json-editor .property {
        width: 110px;
        background-color: #B1C639;
        color: white;
        font-weight: bold;
        text-shadow: 1px 1px 1px black;
    }
    .json-editor .item {
        line-height: 20px;
        display: flex;
        margin-top: 2px;
    }
    .json-editor .value {
        background-color: #ECF3C3;
        width: auto; 
        flex: 1;
    }
}